<cly-drawer
    class="cly-vue-push-notification-drawer"
    @submit="onSubmit"
    @close="onClose"
    @open="onOpen"
    ref="drawer"
    :set-step-callback-fn="onStepClick"
    :title="title"
    :requires-async-submit="true"
    :saveButtonLabel="saveButtonLabel"
    v-bind="controls">
    <template v-slot:sidecars="drawerScope">
        <cly-content id="mainSidecar" role="sidecar" :always-active="true" style="display: flex;justify-content: center;align-items: center; height:100%">
            <mobile-message-preview
                v-if="(drawerScope.currentStepId === 'step4' ||  drawerScope.currentStepId === 'step5') && pushNotificationUnderEdit.messageType === MessageTypeEnum.CONTENT"
                :title="pushNotificationUnderEdit.message[activeLocalization].title" 
                :subtitle="pushNotificationUnderEdit.settings[PlatformEnum.IOS].subtitle"
                :content="pushNotificationUnderEdit.message[activeLocalization].content" 
                :platforms="pushNotificationUnderEdit.platforms" 
                :media="previewMessageMedia" 
                :buttons="pushNotificationUnderEdit.message[activeLocalization].buttons.map(function(item){return item.label})">
            </mobile-message-preview>
        </cly-content>
    </template>
    <template v-slot:controls-left="controlsLeft">
        <el-button size="small" @click="onDraft" type="default" :disabled="!isDraftButtonEnabled">{{i18n('push-notification.save-as-draft')}}</el-button>
    </template>
    <template v-slot:default="drawerScope">
            <cly-form-step id="step1" :name="i18n('push-notification-drawer.step-one')">
                <form>
                    <div class="cly-vue-push-notification-drawer__section">
                        <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__input-label">{{i18n('push-notification.notification-name')}}</div>
                        <div class="cly-vue-push-notification-drawer__input-description">{{i18n('push-notification.notification-name-description')}}</div>
                        <validation-provider v-slot="validation">
                            <form>
                                <el-input 
                                    autocomplete="off"
                                    v-model="pushNotificationUnderEdit.name" 
                                    :placeholder="i18n('push-notification-drawer.campaign-name')" 
                                    :class="{'is-error': validation.errors.length > 0}">
                                </el-input>
                            </form>
                        </validation-provider>
                        <div class="bu-mt-5">
                            <div> 
                                <span class="text-medium font-weight-bold">{{ i18n('push-notification-drawer.notification-type') }}</span>
                                <cly-tooltip-icon 
                                    style="margin-bottom: 1px"
                                    :tooltip="i18n('push-notification-drawer.notification-type-tooltip')" 
                                    icon="ion ion-help-circled"> 
                                </cly-tooltip-icon>
                            </div>
                            <div class="bu-mt-2" v-for="campaign in campaignTypes">
                                <line-radio-button-with-description 
                                    :label="campaign.label"
                                    v-model="campaignType"
                                    :description="campaign.description"
                                    :title="campaign.label"
                                    :disabled="isEditMode()"
                                    border>
                                </line-radio-button-with-description>
                            </div>
                        </div>
                    </div>
                </form>
            </cly-form-step>
            <cly-form-step id="step2" :name="i18n('push-notification-drawer.step-two')" v-loading="isLoading">
                <form>
                <div class="cly-vue-push-notification-drawer__section">
                    <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__checkbox-group-header">{{i18n('push-notification.platforms')}}</div>
                    <validation-provider v-slot="validation" rules="required" name="platforms">
                        <el-checkbox-group :value="pushNotificationUnderEdit.platforms">
                            <el-checkbox 
                                type="checkbox" 
                                :label="PlatformEnum.ANDROID" 
                                @change="onPlatformChange(PlatformEnum.ANDROID)"
                                :class="{'cly-vue-push-notification-drawer__checkbox-is-error':validation.errors.length > 0}">
                                {{i18n('push-notification.android')}}
                            </el-checkbox>
                            <el-checkbox 
                                type="checkbox" 
                                @change="onPlatformChange(PlatformEnum.IOS)"
                                :label="PlatformEnum.IOS" 
                                :class="{'cly-vue-push-notification-drawer__checkbox-is-error':validation.errors.length > 0}">
                                {{i18n('push-notification.ios')}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </validation-provider>
                </div>
                <template v-if="type === TypeEnum.ONE_TIME || type ===  TypeEnum.RECURRING || type === TypeEnum.MULTIPLE">
                    <div  class="cly-vue-drawer-step__section" v-if="typeof pushNotificationUnderEdit.isEe !== 'undefined' && pushNotificationUnderEdit.isEe">
                        <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header">
                            {{i18n('push-notification.targeting')}}
                            <cly-tooltip-icon 
                                :tooltip="i18n('push-notification.targeting-tooltip')" 
                                icon="ion ion-help-circled"> 
                            </cly-tooltip-icon>
                        </div>
                        <div class="bu-level bu-is-flex-wrap-wrap">
                            <large-radio-button-with-description
                                :label="TargetingEnum.ALL"
                                :tooltip="i18n('push-notification-drawer.all-push-enabled-users-tooltip')"  
                                v-model="pushNotificationUnderEdit[type].targeting"
                                :description="i18n('push-notification.push-enabled-users')"                       
                                :title="i18n('push-notification.all-push-enabled-users')">   
                                <div v-if="pushNotificationUnderEdit[type].audienceSelection === AudienceSelectionEnum.NOW" class="bu-is-flex bu-is-justify-content-flex-start bu-is-align-items-baseline">
                                    <span class="cly-vue-push-notification-large-radio-button-with-description__content-header bu-mr-2">{{totalEnabledUsers}}</span> 
                                </div>
                            </large-radio-button-with-description>
                            <large-radio-button-with-description
                                :label="TargetingEnum.SEGMENTED"
                                v-model="pushNotificationUnderEdit[type].targeting"
                                :title="i18n('push-notification.use-segmentation')"
                                :description="i18n('push-notification.use-segmentation-description')">                        
                            </large-radio-button-with-description>
                        </div>
                    </div>
                    <div v-if="pushNotificationUnderEdit[type].targeting === TargetingEnum.SEGMENTED && pushNotificationUnderEdit.isCohorts">
                        <div class="cly-vue-drawer-step__section">
                            <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__input-label">{{i18n('push-notification.send-to-users-in-cohorts')}}</div>
                            <div class="cly-vue-push-notification-drawer__input-description">{{i18n('push-notification.send-to-users-in-cohorts-description')}}</div>
                            <validation-provider vid="cohort" v-slot="validation" :rules="{required:areCohortsAndLocationsRequired}" :detectInput="true">
                                <el-select
                                    v-model="pushNotificationUnderEdit.cohorts"
                                    multiple
                                    isFullWidth
                                    filterable
                                    reserve-keyword
                                    :placeholder="i18n('push-notification.select-cohort')"
                                    :loading="isFetchCohortsLoading"
                                    :class="{'is-error': validation.errors.length > 0}"
                                    style="width:100%">
                                    <el-option
                                        v-for="item in cohortOptions"
                                        :key="item._id"
                                        :label="item.name"
                                        :value="item._id">
                                    </el-option>
                                </el-select>
                            </validation-provider>
                        </div>
                        <div class="cly-vue-drawer-step__section" v-if="pushNotificationUnderEdit.isGeo">
                            <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__input-label">{{i18n('push-notification.send-to-users-in-locations')}}</div>
                            <div class="cly-vue-push-notification-drawer__input-description">{{i18n('push-notification.send-to-users-in-locations-description')}}</div>
                            <validation-provider vid="location" v-slot="validation" :rules="{required:areCohortsAndLocationsRequired}" :detectInput="true">
                                <el-select
                                    v-model="pushNotificationUnderEdit.locations"
                                    multiple
                                    isFullWidth
                                    filterable
                                    reserve-keyword
                                    :loading="isFetchLocationsLoading"
                                    :placeholder="i18n('push-notification.select-location')"
                                    :class="{'is-error': validation.errors.length > 0}"
                                    style="width:100%">
                                    <el-option
                                        v-for="item in locationOptions"
                                        :key="item._id"
                                        :label="item.name"
                                        :value="item._id">
                                    </el-option>
                                </el-select>    
                            </validation-provider>
                        </div>
                    </div>
                    <div v-if="type === TypeEnum.ONE_TIME" class="cly-vue-drawer-step__section">
                        <div class="bu-mb-2 cly-vue-push-notification-drawer__line-radio-button-group-header">
                            {{i18n('push-notification.when-to-determine-users')}}
                            <cly-tooltip-icon :tooltip="i18n('push-notification.when-to-determine-users-tooltip')" icon="ion ion-help-circled"></cly-tooltip-icon>
                        </div>
                        <div class="bu-is-flex bu-is-flex-direction-column">
                            <line-radio-button-with-description 
                                :label="AudienceSelectionEnum.NOW"
                                v-model="pushNotificationUnderEdit[type].audienceSelection"
                                :title="i18n('push-notification.determine-users-now')">
                            </line-radio-button-with-description>
                            <line-radio-button-with-description 
                                :label="AudienceSelectionEnum.BEFORE"
                                v-model="pushNotificationUnderEdit[type].audienceSelection"
                                :title="i18n('push-notification.determine-users-before')">
                            </line-radio-button-with-description>
                        </div>
                    </div>
                </template>
                <template v-else-if="type === TypeEnum.AUTOMATIC">
                    <div class="cly-vue-drawer-step__section" v-if="pushNotificationUnderEdit.isGeo">
                        <div class="bu-is-flex bu-is-align-items-center">
                            <el-switch v-model="isLocationSet" class="bu-mr-1"></el-switch>
                            <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header">
                                {{i18n('push-notification.geolocations')}}
                            </div>
                        </div>
                        <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__input-label">{{i18n('push-notification.send-to-users-in-locations')}}</div>
                        <div class="cly-vue-push-notification-drawer__input-description">{{i18n('push-notification.send-to-users-in-locations-description')}}</div>
                        <validation-provider v-slot="validation" :rules="{required:isLocationSet}">
                            <el-select
                                v-model="pushNotificationUnderEdit.locations"
                                multiple
                                isFullWidth
                                filterable
                                reserve-keyword
                                :disabled="!isLocationSet"
                                :placeholder="i18n('push-notification.select-location')"
                                :loading="isFetchLocationsLoading"
                                :class="{'is-error': validation.errors.length > 0}"
                                style="width:100%">
                                <el-option
                                    v-for="item in locationOptions"
                                    :key="item._id"
                                    :label="item.name"
                                    :value="item._id">
                                </el-option>
                            </el-select> 
                        </validation-provider>
                    </div>
                    <div class="cly-vue-drawer-step__section">
                        <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header">
                            {{i18n('push-notification.triggers')}}
                            <!-- <cly-tooltip-icon :tooltip="i18n('push-notification.triggers-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon> -->
                        </div>
                        <div class="cly-vue-push-notification-drawer__input-description">{{i18n('push-notification.triggers-description')}}</div>
                        <div class="bu-is-flex bu-is-flex-direction-column">
                            <line-radio-button-with-description
                                :label="TriggerEnum.COHORT_ENTRY"
                                v-model="pushNotificationUnderEdit.automatic.trigger"
                                :title="i18n('push-notification.cohorts-entry')"
                                :description="i18n('push-notification.cohorts-entry-description')"
                                v-if="pushNotificationUnderEdit.isCohorts"
                                border>
                            </line-radio-button-with-description>
                            <line-radio-button-with-description
                                :label="TriggerEnum.COHORT_EXIT"
                                v-model="pushNotificationUnderEdit.automatic.trigger"
                                :title="i18n('push-notification.cohorts-exit')"
                                :description="i18n('push-notification.cohorts-exit-description')"
                                v-if="pushNotificationUnderEdit.isCohorts"
                                border>
                            </line-radio-button-with-description>
                            <line-radio-button-with-description
                                :label="TriggerEnum.EVENT"
                                v-model="pushNotificationUnderEdit.automatic.trigger"
                                :title="i18n('push-notification.performed-events')"
                                :description="i18n('push-notification.performed-events-description')"
                                border>
                            </line-radio-button-with-description>
                        </div>
                    </div>
                    <template v-if="pushNotificationUnderEdit.automatic.trigger === TriggerEnum.EVENT">
                        <div class="cly-vue-drawer-step__section">
                            <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__input-label">{{i18n('push-notification.select-event-to-set-trigger')}}</div>
                            <div class="cly-vue-push-notification-drawer__input-description">{{i18n('push-notification.select-event-to-set-trigger-description')}}</div>
                            <validation-provider v-slot="validation" rules="required" :detectInput="true">
                                <el-select
                                    v-model="pushNotificationUnderEdit.automatic.events"
                                    multiple
                                    filterable
                                    isFullWidth
                                    reserve-keyword
                                    :collapse-tags="false"
                                    :placeholder="i18n('push-notification.select-event')"
                                    :loading="isFetchEventsLoading"
                                    :class="{'is-error': validation.errors.length > 0}"
                                    style="width:100%">
                                    <el-option
                                        v-for="item in eventOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </validation-provider>
                        </div>
                    </template>
                    <template v-else>
                        <div class="cly-vue-drawer-step__section">
                            <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__input-label">{{i18n('push-notification.select-cohort-to-set-trigger')}}</div>
                            <div class="cly-vue-push-notification-drawer__input-description">{{i18n('push-notification.select-cohort-to-set-trigger-description')}}</div>
                            <validation-provider v-slot="validation" rules="required" :detectInput="true">
                                <el-select
                                    v-model="pushNotificationUnderEdit.automatic.cohorts"
                                    multiple
                                    isFullWidth
                                    filterable
                                    reserve-keyword
                                    :collapse-tags="false"
                                    :placeholder="i18n('push-notification.select-cohort')"
                                    :loading="isFetchCohortsLoading"
                                    :class="{'is-error': validation.errors.length > 0}"
                                    style="width:100%">
                                    <el-option
                                        v-for="item in cohortOptions"
                                        :key="item._id"
                                        :label="item.name"
                                        :value="item._id">
                                    </el-option>
                                </el-select>         
                            </validation-provider>      
                        </div>
                    </template>
                    <div class="cly-vue-drawer-step__section">
                        <div class="bu-mb-2 cly-vue-push-notification-drawer__line-radio-button-group-header">
                            {{i18n('push-notification.delivery-date-calculation')}}
                            <!-- <cly-tooltip-icon :tooltip="i18n('push-notification.delivery-date-description')" icon="ion ion-help-circled"> </cly-tooltip-icon> -->
                        </div>
                        <div class="bu-is-flex bu-is-flex-direction-column">
                            <line-radio-button-with-description 
                                :label="DeliveryDateCalculationEnum.EVENT_SERVER_DATE"
                                v-model="pushNotificationUnderEdit.automatic.deliveryDateCalculation"
                                :title="i18n('push-notification.relative-to-the-date-event-server')">
                            </line-radio-button-with-description>
                            <line-radio-button-with-description 
                                :label="DeliveryDateCalculationEnum.EVENT_DEVICE_DATE"
                                v-model="pushNotificationUnderEdit.automatic.deliveryDateCalculation"
                                :title="i18n('push-notification.relative-to-the-date-event-device')">
                            </line-radio-button-with-description>
                        </div>
                    </div>
                    <template v-if="pushNotificationUnderEdit.automatic.trigger !== TriggerEnum.EVENT">
                        <div class="cly-vue-drawer-step__section">
                            <div class="bu-mb-2 cly-vue-push-notification-drawer__line-radio-button-group-header">
                                {{i18n('push-notification.behavior-trigger-not-met')}}
                            </div>
                            <div class="bu-is-flex bu-is-flex-direction-column">
                                <line-radio-button-with-description 
                                    :label="TriggerNotMetEnum.SEND_ANYWAY"
                                    v-model="pushNotificationUnderEdit.automatic.triggerNotMet"
                                    :title="i18n('push-notification.send-anyway')">
                                </line-radio-button-with-description>
                                <line-radio-button-with-description 
                                    :label="TriggerNotMetEnum.CANCEL_ON_EXIT"
                                    v-model="pushNotificationUnderEdit.automatic.triggerNotMet"
                                    :title="i18n('push-notification.cancel-when-user-exits-cohort')">
                                </line-radio-button-with-description>
                            </div>
                        </div>
                    </template>
                </template>
                <template v-else-if="type === TypeEnum.RECURRING">
                    <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header">
                        {{i18n('push-notification.targeting')}}
                        <cly-tooltip-icon 
                            :tooltip="i18n('push-notification.targeting-tooltip')" 
                            icon="ion ion-help-circled"> 
                        </cly-tooltip-icon>
                    </div>
                    <div class="bu-level bu-is-flex-wrap-wrap">
                        <large-radio-button-with-description
                            :label="TargetingEnum.ALL"
                            :tooltip="i18n('push-notification-drawer.all-push-enabled-users-tooltip')"  
                            v-model="pushNotificationUnderEdit[TypeEnum.RECURRING].targeting"
                            :description="i18n('push-notification.push-enabled-users')"                       
                            :title="i18n('push-notification.all-push-enabled-users')">   
                            <div v-if="pushNotificationUnderEdit[TypeEnum.RECURRING].audienceSelection === AudienceSelectionEnum.NOW" class="bu-is-flex bu-is-justify-content-flex-start bu-is-align-items-baseline">
                                <span class="cly-vue-push-notification-large-radio-button-with-description__content-header bu-mr-2">{{totalEnabledUsers}}</span> 
                            </div>
                        </large-radio-button-with-description>
                        <large-radio-button-with-description
                            :label="TargetingEnum.SEGMENTED" 
                            v-model="pushNotificationUnderEdit[TypeEnum.RECURRING].targeting"
                            :title="i18n('push-notification.use-segmentation')"
                            :description="i18n('push-notification.use-segmentation-description')">                        
                        </large-radio-button-with-description>
                    </div>
                </template>
                </form>
            </cly-form-step>
            <cly-form-step id="step3" :name="i18n('push-notification-drawer.step-three')">
                <form>
                <div class="cly-vue-drawer-step__section">
                    <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header text-medium font-weight-bold">
                        <template v-if="type === TypeEnum.ONE_TIME || type === TypeEnum.RECURRING || type === TypeEnum.MULTIPLE">
                            <span class="text-big font-weight-bold">{{i18n('push-notification.delivery')}}</span>
                        </template>
                        <template v-else>{{i18n('push-notification.set-start-date')}}</template>
                        <cly-tooltip-icon :tooltip="i18n('push-notification.set-start-date-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                        <span v-if="type === TypeEnum.MULTIPLE" class="text-smallish color-cool-gray-50 bu-is-block bu-mt-2">{{i18n('push-notification.delivery-date-description')}}</span>
                    </div>
                    <div class="bu-level bu-is-flex-wrap-wrap" v-if="type === TypeEnum.ONE_TIME || type === TypeEnum.AUTOMATIC || type === TypeEnum.TRANSACTIONAL">
                        <large-radio-button-with-description
                            :label="SendEnum.NOW"
                            v-model="pushNotificationUnderEdit.delivery.type"
                            :title="i18n('push-notification.send-now')"
                            :description="i18n('push-notification.send-now-description')">
                        </large-radio-button-with-description>
                        <large-radio-button-with-description
                            :label="SendEnum.LATER"
                            v-model="pushNotificationUnderEdit.delivery.type"
                            :title="i18n('push-notification.schedule-for-later')">    
                            <cly-date-picker 
                                :offset-correction="false"
                                v-bind:disabled="pushNotificationUnderEdit.delivery.type === SendEnum.NOW" 
                                v-model="startDate" 
                                timestampFormat="ms" 
                                type="date" 
                                :select-time="true" 
                                :is-future="true">
                            </cly-date-picker>
                        </large-radio-button-with-description>
                    </div>
                </div>
                <div v-if="type === TypeEnum.AUTOMATIC" class="cly-vue-drawer-step__section">
                    <div class="bu-is-flex bu-is-flex-direction-column bu-pb-5">
                        <div class="bu-is-flex bu-is-align-items-center">
                            <el-switch v-model="isEndDateSet" class="bu-mr-2"></el-switch>
                            <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header text-medium font-weight-bold">
                                {{i18n('push-notification.set-end-date')}}
                                <cly-tooltip-icon :tooltip="i18n('push-notification.set-end-date-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                            </div>
                        </div>
                        <div style="width:200px">
                            <cly-date-picker 
                                :offset-correction="false"
                                class="bu-ml-6" 
                                v-bind:disabled="!isEndDateSet" 
                                v-model="endDate" 
                                timestampFormat="ms" 
                                type="date" 
                                width="200" 
                                :select-time="true" 
                                :is-future="true">
                            </cly-date-picker>
                        </div>
                    </div>
                    <div class="bu-is-flex bu-is-flex-direction-column">
                        <div class="bu-is-flex bu-is-align-items-center">
                            <el-switch v-model="isUsersTimezoneSet" class="bu-mr-2"></el-switch>
                            <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header text-medium font-weight-bold">
                                {{i18n('push-notification.delivery-time')}}
                                <cly-tooltip-icon :tooltip="i18n('push-notification.delivery-time-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                            </div>
                        </div>
                        <div style="width:200px">
                            <cly-time-picker
                                class="bu-ml-6" 
                                v-bind:disabled="!isUsersTimezoneSet"
                                v-model="usersTimezone">
                            </cly-time-picker>
                        </div>
                    </div>
                    <div v-if="isUsersTimezoneSet" class="cly-vue-drawer-step__section bu-mt-5">
                        <div class="bu-mb-2 cly-vue-push-notification-drawer__line-radio-button-group-header">
                            {{i18n('push-notification.what-if-past-scheduled')}}
                            <cly-tooltip-icon :tooltip="i18n('push-notification.what-if-past-scheduled-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                        </div>
                        <div class="bu-is-flex bu-is-flex-direction-column">
                            <line-radio-button-with-description 
                                :label="PastScheduleEnum.SKIP"
                                v-model="pushNotificationUnderEdit[type].pastSchedule"
                                :title="i18n('push-notification.do-not-send-message')">
                            </line-radio-button-with-description>
                            <line-radio-button-with-description 
                                :label="PastScheduleEnum.NEXT_DAY"
                                v-model="pushNotificationUnderEdit[type].pastSchedule"
                                :title="i18n('push-notification.deliver-next-day')">
                            </line-radio-button-with-description>
                        </div>
                    </div>
                </div>
                <template v-if="type === TypeEnum.MULTIPLE">
                    <div v-for="(_, index) in pushNotificationUnderEdit.delivery.multipleDates" class="bu-is-flex bu-mt-2">
                        <cly-date-picker 
                            :offset-correction="false"
                            v-model="pushNotificationUnderEdit.delivery.multipleDates[index]"
                            timestampFormat="ms" 
                            type="date"
                            width="200"
                            :select-time="true" 
                            :is-future="true">
                        </cly-date-picker>
                        <div class="cly-icon-button cly-icon-button--gray cly-vue-qb-icon" @click="removeDate(index)">
                            <i class="el-icon-close"></i>
                        </div>
                    </div>
                    <div class="cly-text-button bu-mt-3 bu-ml-3 bu-mb-5" @click="addDate()">
                    + {{i18n('push-notification.add-more')}}
                    </div>
                </template>
                <template v-if="(type === TypeEnum.ONE_TIME && pushNotificationUnderEdit.delivery.type === SendEnum.LATER) || (type === TypeEnum.MULTIPLE)">
                    <div class="cly-vue-drawer-step__section">
                        <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header">
                            {{i18n('push-notification.timezone')}}
                            <cly-tooltip-icon :tooltip="i18n('push-notification.timezone-description')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                        </div>
                        <div class="bu-level bu-is-flex-wrap-wrap bu-mt-2">
                            <large-radio-button-with-description
                                :label="TimezoneEnum.SAME"
                                size="large"
                                v-model="pushNotificationUnderEdit.timezone"
                                :title="i18n('push-notification.deliver-to-all-users-same-time')"
                                :description="i18n('push-notification.deliver-to-all-users-same-time-description')">
                            </large-radio-button-with-description>
                            <large-radio-button-with-description
                                :label="TimezoneEnum.DEVICE"
                                size="large"
                                v-model="pushNotificationUnderEdit.timezone"
                                :title="i18n('push-notification.deliver-to-all-users-device-time')"
                                :description="i18n('push-notification.deliver-to-all-users-device-time-description')">
                            </large-radio-button-with-description>
                        </div>
                    </div>
                    <div class="cly-vue-drawer-step__section">
                        <div class="bu-mb-2 cly-vue-push-notification-drawer__line-radio-button-group-header">
                            {{i18n('push-notification.what-if-past-scheduled')}}
                            <cly-tooltip-icon :tooltip="i18n('push-notification.what-if-past-scheduled-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                        </div>
                        <div class="bu-is-flex bu-is-flex-direction-column">
                            <line-radio-button-with-description 
                                :label="PastScheduleEnum.SKIP"
                                v-model="pushNotificationUnderEdit[type].pastSchedule"
                                :title="i18n('push-notification.do-not-send-message')">
                            </line-radio-button-with-description>
                            <line-radio-button-with-description 
                                :label="PastScheduleEnum.NEXT_DAY"
                                v-model="pushNotificationUnderEdit[type].pastSchedule"
                                :title="i18n('push-notification.deliver-next-day')">
                            </line-radio-button-with-description>
                        </div>
                    </div>
                </template>
                <div class="cly-vue-drawer-step__section" v-if="type === TypeEnum.AUTOMATIC">
                    <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header text-big font-weight-bold">{{i18n('push-notification.delivery-method')}}</div>
                    <div class="cly-vue-push-notification-drawer__input-description">{{i18n('push-notification.delivery-method-description')}}</div>
                    <div class="bu-level bu-is-flex-wrap-wrap">
                        <large-radio-button-with-description
                            :label="DeliveryMethodEnum.IMMEDIATELY"
                            v-model="pushNotificationUnderEdit.automatic.deliveryMethod"
                            :title="i18n('push-notification.immediately')"
                            :description="i18n('push-notification.immediately-description')">
                        </large-radio-button-with-description>
                        <large-radio-button-with-description
                            :label="DeliveryMethodEnum.DELAYED"
                            v-model="pushNotificationUnderEdit.automatic.deliveryMethod"
                            :title="i18n('push-notification.delayed')">    
                            <validation-provider v-slot="validation" rules="required|integer" class="bu-mr-1">
                                <el-input 
                                    :disabled="pushNotificationUnderEdit.automatic.deliveryMethod !== DeliveryMethodEnum.DELAYED" 
                                    v-model="pushNotificationUnderEdit.automatic.delayed.days" 
                                    controls-position="right"
                                    :class="{'is-error': validation.errors.length > 0}"
                                    :min="0" 
                                    style="min-width:100px">
                                    <template slot="suffix">
                                        <span class="bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">{{i18n('push-notification.days')}}</span>
                                    </template>
                                </el-input>
                            </validation-provider>
                            <validation-provider v-slot="validation" rules="required|integer|min_value:0|max_value:23|min:1|max:2" class="bu-ml-1">
                                <el-input 
                                    :disabled="pushNotificationUnderEdit.automatic.deliveryMethod !== DeliveryMethodEnum.DELAYED" 
                                    v-model="pushNotificationUnderEdit.automatic.delayed.hours" 
                                    controls-position="right" 
                                    :min="0" 
                                    :max="23" 
                                    style="min-width:100px"
                                    :class="{'is-error': validation.errors.length > 0}">
                                    <template slot="suffix">
                                        <span class="bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">{{i18n('push-notification.hours')}}</span>
                                    </template>
                                </el-input>          
                            </validation-provider>
                        </large-radio-button-with-description>
                    </div>
                </div>
                <template v-if="type === TypeEnum.AUTOMATIC">
                    <div class="cly-vue-drawer-step__section">
                        <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header">
                            {{i18n('push-notification.capping')}}
                            <cly-tooltip-icon :tooltip="i18n('push-notification.capping-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                        </div>
                        <div class="bu-level bu-is-flex-wrap-wrap">
                            <large-radio-button-with-description
                                :label="false"
                                v-model="pushNotificationUnderEdit.automatic.capping"
                                :title="i18n('push-notification.no-capping')"
                                :description="i18n('push-notification.no-capping-description')">
                            </large-radio-button-with-description>
                            <large-radio-button-with-description
                                :label="true"
                                v-model="pushNotificationUnderEdit.automatic.capping"
                                :title="i18n('push-notification.capped')"
                                :description="i18n('push-notification.capped-description')">                           
                            </large-radio-button-with-description>
                        </div>
                    </div>
                    <div class="cly-vue-drawer-step__section" v-if="pushNotificationUnderEdit.automatic.capping">
                        <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header text-medium font-weight-bold">
                            {{i18n('push-notification.maximum-messages-per-user')}}
                            <cly-tooltip-icon :tooltip="i18n('push-notification.maximum-messages-per-user-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                        </div>
                        <div class="bu-level">
                            <validation-provider v-slot="validation" rules="required|integer">
                                <el-input v-model="pushNotificationUnderEdit.automatic.maximumMessagesPerUser" placeholder="0" :min="1" style="width:200px" :class="{'is-error': validation.errors.length > 0}">
                                    <template slot="suffix">
                                        <span class="bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">{{i18n('push-notification.messages')}}</span>
                                    </template>
                                </el-input>
                            </validation-provider>
                        </div>
                    </div>
                    <div class="cly-vue-drawer-step__section" v-if="pushNotificationUnderEdit.automatic.capping">
                        <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header text-medium font-weight-bold">
                            {{i18n('push-notification.minimum-time-between-messages')}}
                            <cly-tooltip-icon :tooltip="i18n('push-notification.minimum-time-between-messages-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                        </div>
                        <div class="bu-is-flex is-justify-content-flex-start">
                            <validation-provider v-slot="validation" rules="required|integer" class="bu-mr-1">
                                <el-input v-model="pushNotificationUnderEdit.automatic.minimumTimeBetweenMessages.days" controls-position="right" :min="0" style="width:100px" :class="{'is-error': validation.errors.length > 0}">
                                    <template slot="suffix">
                                        <span class="bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">{{i18n('push-notification.days')}}</span>
                                    </template>
                                </el-input>
                            </validation-provider>
                            <validation-provider v-slot="validation" rules="required|integer|min_value:0|max_value:23|min:1|max:2" class="bu-ml-1">
                                <el-input v-model="pushNotificationUnderEdit.automatic.minimumTimeBetweenMessages.hours" controls-position="right" :min="0" :max="23" style="width:100px" :class="{'is-error': validation.errors.length > 0}">
                                    <template slot="suffix">
                                        <span class="bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">{{i18n('push-notification.hours')}}</span>
                                    </template>
                                </el-input>
                            </validation-provider>
                        </div>
                    </div>
                </template>
                <template v-if="type === TypeEnum.RECURRING">
                    <div class="bu-is-flex bu-is-flex-direction-column">
                        <span class="text-medium font-weight-bold">{{i18n('push-notification-drawer.rec-push-start-date')}}</span>
                        <div class="cly-vue-push-notification-drawer__date-picker-wrapper bu-mt-2">
                            <cly-date-picker 
                                :offset-correction="false"
                                v-model="startDate" 
                                timestampFormat="ms" 
                                type="date"
                                width="200"
                                :select-time="true" 
                                :is-future="true">
                            </cly-date-picker>
                        </div>
                    </div>
                    <div class="bu-is-flex bu-is-flex-direction-column bu-pb-5 bu-mt-5">
                        <div class="bu-is-flex bu-is-align-items-center">
                            <el-switch v-model="isEndDateSet" class="bu-mr-2"></el-switch>
                            <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header text-medium font-weight-bold">
                                <span class="text-medium font-weight-bold">{{i18n('push-notification.set-end-date')}}</span>
                            </div>
                        </div>
                        <div class="cly-vue-push-notification-drawer__date-picker-wrapper">
                            <cly-date-picker 
                                :offset-correction="false"
                                class="bu-ml-6" 
                                v-bind:disabled="!isEndDateSet" 
                                v-model="endDate" 
                                timestampFormat="ms" 
                                type="date" 
                                width="200" 
                                :select-time="true" 
                                :is-future="true">
                            </cly-date-picker>
                        </div>
                    </div>
                    <div class="bu-mt-5">
                        <span class="text-big font-weight-bold">{{i18n('push-notification-drawer.notification-frequency')}}</span>
                        <div class="cly-vue-push-notification-drawer__radio-button-group bu-mt-3">
                            <el-radio-group class="bu-ml-1" size="medium" @change="onSelectedBucket" v-model="pushNotificationUnderEdit.delivery.repetition.bucket">
                                <el-radio-button
                                    :label="bucketType"
                                    :key="bucketType"
                                    v-for="bucketType in bucketList">
                                    {{i18n('push-notification.' + bucketType)}}
                                </el-radio-button>
                            </el-radio-group>
                        </div>
                    </div>
                    <div class="bu-mt-6">
                        <span class="text-medium font-weight-bold">{{i18n('push-notification-drawer.repetition-for-every')}}</span>
                        <cly-tooltip-icon :tooltip="i18n('push-notification-drawer.repetition-for-every-tooltip', i18n('push-notification-drawer.repetitions-' + pushNotificationUnderEdit.delivery.repetition.bucket))" icon="ion ion-help-circled"></cly-tooltip-icon>
                        <div class="cly-vue-push-notification-drawer__radio-button-group bu-mt-2">
                            <validation-provider v-slot="validation" rules="required|integer" class="bu-mr-1">
                                <el-input v-model="pushNotificationUnderEdit.delivery.repetition.every" :min="0" style="width:120px" :class="{'is-error': validation.errors.length > 0}">
                                    <template slot="suffix">
                                        <span class="bu-mr-3 bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">
                                            {{pushNotificationUnderEdit.delivery.repetition.every === '0' || pushNotificationUnderEdit.delivery.repetition.every === '1' ? i18n('push-notification-drawer.repetition-' + pushNotificationUnderEdit.delivery.repetition.bucket) : i18n('push-notification-drawer.repetitions-' + pushNotificationUnderEdit.delivery.repetition.bucket)}}
                                        </span>
                                    </template>
                                </el-input>
                            </validation-provider>
                        </div>
                    </div>
                    <div class="bu-mt-5" v-if="pushNotificationUnderEdit.delivery.repetition.bucket === 'weekly' || pushNotificationUnderEdit.delivery.repetition.bucket === 'monthly'">
                        <span class="text-medium font-weight-bold">{{i18n('push-notification-drawer.repeat-on')}}</span>
                        <div class="cly-vue-push-notification-drawer__radio-button-group bu-mt-2">
                            <validation-provider v-slot="validation" rules="required" class="bu-ml-1">
                                <cly-select-x
                                    class="cly-vue-push-notification-drawer__repetition-weekly-select"
                                    mode="multi-check"
                                    :collapse-tags="false"
                                    v-model="pushNotificationUnderEdit.delivery.repetition.on"
                                    :options="pushNotificationUnderEdit.delivery.repetition.bucket === 'weekly' ? weeklyRepetitionOptions : monthlyRepetitionOptions">
                                </cly-select-x>
                            </validation-provider>
                        </div>
                    </div>
                    <div class="bu-mt-5">
                        <span class="text-medium font-weight-bold">{{i18n('push-notification-drawer.repeat-at')}}</span>
                        <cly-tooltip-icon :tooltip="i18n('push-notification-drawer.repeat-at-tooltip')" icon="ion ion-help-circled"></cly-tooltip-icon>
                        <div class="cly-vue-push-notification-drawer__radio-button-group bu-mt-2">
                            <cly-time-picker
                                style="width:100px"
                                v-model="pushNotificationUnderEdit.delivery.repetition.at">
                            </cly-time-picker>
                        </div>
                    </div>
                    <div class="cly-vue-drawer-step__section bu-mt-5">
                        <div class="bu-mb-2 cly-vue-push-notification-drawer__line-radio-button-group-header">
                            {{i18n('push-notification.what-if-past-scheduled')}}
                            <cly-tooltip-icon :tooltip="i18n('push-notification.what-if-past-scheduled-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                        </div>
                        <div class="bu-is-flex bu-is-flex-direction-column">
                            <line-radio-button-with-description 
                                :label="PastScheduleEnum.SKIP"
                                v-model="pushNotificationUnderEdit[type].pastSchedule"
                                :title="i18n('push-notification.do-not-send-message')">
                            </line-radio-button-with-description>
                            <line-radio-button-with-description 
                                :label="PastScheduleEnum.NEXT_DAY"
                                v-model="pushNotificationUnderEdit[type].pastSchedule"
                                :title="i18n('push-notification.deliver-next-day')">
                            </line-radio-button-with-description>
                        </div>
                    </div>
                </template>
                <div class="cly-vue-drawer-step__section" v-if="type === TypeEnum.ONE_TIME || type === TypeEnum.AUTOMATIC || type === TypeEnum.TRANSACTIONAL || type === TypeEnum.MULTIPLE">
                    <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__radio-group-header text-big font-weight-bold">
                        {{i18n('push-notification.expiration-time')}}
                        <cly-tooltip-icon :tooltip="i18n('push-notification.expiration-time-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                        <div class="cly-vue-push-notification-drawer__input-description">{{i18n('push-notification.expiration-time-description')}}</div>
                    </div>
                    <div class="bu-is-flex is-justify-content-flex-start">
                        <validation-provider v-slot="validation" rules="required|integer" class="bu-mr-1">
                            <el-input v-model="pushNotificationUnderEdit.expiration.days" :min="0" style="width:100px" :class="{'is-error': validation.errors.length > 0}">
                                <template slot="suffix">
                                    <span class="bu-mr-3 bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">{{i18n('push-notification.days')}}</span>
                                </template>
                            </el-input>
                        </validation-provider>
                        <validation-provider v-slot="validation" rules="required|integer|min_value:0|max_value:23" class="bu-ml-1">
                            <el-input v-model="pushNotificationUnderEdit.expiration.hours" :min="0" style="width:100px" :class="{'is-error': validation.errors.length > 0}">
                                <template slot="suffix">
                                    <span class="bu-mr-3 bu-is-flex bu-is-align-items-center cly-vue-push-notification-drawer__input-suffix">{{i18n('push-notification.hours')}}</span>
                                </template>
                            </el-input>
                        </validation-provider>
                    </div>
                </div>
                </form>
            </cly-form-step>
            <cly-form-step id="step4" :name="i18n('push-notification-drawer.step-four')" class="bu-container">  
                <form>
                <div class="cly-vue-drawer-step__section">
                    <div class="bu-is-flex bu-is-align-items-center">
                        <div class="bu-py-1 bu-my-1 bu-mr-2 cly-vue-push-notification-drawer__checkbox-label">{{i18n('push-notification.notification-format')}}</div>
                        <el-select :value="pushNotificationUnderEdit.messageType" @change="onMessageTypeChange">
                            <el-option v-for="item in messageTypeFilterOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
                        </el-select>
                    </div>
                </div>
                <template v-if="pushNotificationUnderEdit.messageType === MessageTypeEnum.CONTENT">
                    <div class="cly-vue-drawer-step__section">
                        <div class="cly-vue-push-notification-drawer__radio-group-header bu-mb-4">
                            {{i18n('push-notification.compose-message')}}
                            <cly-tooltip-icon :tooltip="i18n('push-notification.compose-message-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                        </div>
                        <div>
                            <el-checkbox :value="multipleLocalizations" @change="onMultipleLocalizationChange">
                                <div class="cly-vue-push-notification-drawer__checkbox-text">{{i18n('push-notification.allow-to-set-different-content')}}</div>
                            </el-checkbox>
                        </div>
                        <div class="bu-mt-4 bu-is-flex bu-is-justify-content-stretch">
                            <div class="cly-vue-push-notification-drawer__subsection-left " v-if="multipleLocalizations">
                                <div v-for="localization in localizationOptions" 
                                    v-bind:class="['bu-is-flex','bu-is-align-items-center','cly-vue-push-notification-drawer__subsection-left-row',activeLocalization === localization.value?'cly-vue-push-notification-drawer__subsection-left-row-active':null]">
                                    <el-checkbox 
                                        class="bu-ml-2"
                                        v-tooltip.top-left="isDefaultLocalizationActive? i18n('push-notification.default-message-is-required') : null"
                                        :checked="isLocalizationSelected(localization)" 
                                        :disabled="isDefaultLocalization(localization)" 
                                        :key="localization.value" 
                                        @change="onLocalizationChange(localization)">
                                        <li @click="onLocalizationSelect(localization)" class="cly-vue-push-notification-drawer__subsection-left-list-item bu-pr-3 bu-py-2">
                                            {{localization.label}}
                                        </li>
                                    </el-checkbox>
                                </div>
                            </div>
                            <div v-bind:class="['bu-is-flex-grow-1', multipleLocalizations?'cly-vue-push-notification-drawer__subsection-right':'cly-vue-push-notification-drawer__subsection-border']">
                                <div class="cly-vue-drawer-step__section">
                                    <div class="cly-vue-drawer-step__line bu-pt-0 cly-vue-drawer-step__line--aligned">
                                        <div class="cly-vue-push-notification-drawer__input-label">
                                            {{i18n('push-notification.message-title')}}
                                        </div>
                                        <div v-if="typeof pushNotificationUnderEdit.isEe !== 'undefined' && pushNotificationUnderEdit.isEe">
                                            <el-button type="text" @click="onAddUserProperty('title')" class="bu-px-0 cly-text-button" size="small">{{i18n('push-notification.add-variable')}}</el-button>
                                        </div>
                                    </div>
                                    <message-editor-with-emoji-picker 
                                        ref="title"
                                        :isOpen="isAddUserPropertyPopoverOpen.title"
                                        container="title"
                                        id="input-element-title"
                                        :isDefaultLocalizationActive="isDefaultLocalizationActive"
                                        :userProperty="pushNotificationUnderEdit.message[activeLocalization].properties.title[selectedUserPropertyId]"
                                        :options="userPropertiesOptions"
                                        @change="onTitleChange"
                                        @delete="onRemoveUserProperty"
                                        @click="onUserPropertyClick"
                                        @select="onSelectUserProperty"
                                        @input="onInputUserProperty"
                                        @fallback="onInputFallbackUserProperty"
                                        @uppercase="onCheckUppercaseUserProperty"
                                        @remove="onRemoveUserProperty"
                                        @close="closeAddUserPropertyPopover">
                                    </message-editor-with-emoji-picker>
                                </div>
                                <div class="cly-vue-drawer-step__section">
                                    <div class="cly-vue-drawer-step__line bu-pt-0 cly-vue-drawer-step__line--aligned">
                                        <div class="cly-vue-push-notification-drawer__input-label">
                                            {{i18n('push-notification.message-content')}}
                                        </div>
                                        <div v-if="typeof pushNotificationUnderEdit.isEe !== 'undefined' && pushNotificationUnderEdit.isEe">
                                            <el-button type="text" @click="onAddUserProperty('content')" class="bu-px-0 cly-text-button" size="small">{{i18n('push-notification.add-variable')}}</el-button>
                                        </div>
                                    </div>
                                    <message-editor-with-emoji-picker 
                                        ref="content"
                                        :isOpen="isAddUserPropertyPopoverOpen.content"
                                        container="content"
                                        id="input-element-content"
                                        :isRequired="true"
                                        type="textarea"
                                        :placeholder="i18n('push-notification.clear-and-shorter-messages')"
                                        :isDefaultLocalizationActive="isDefaultLocalizationActive"
                                        :userProperty="pushNotificationUnderEdit.message[activeLocalization].properties.content[selectedUserPropertyId]"
                                        :options="userPropertiesOptions"
                                        @change="onContentChange"
                                        @delete="onRemoveUserProperty"
                                        @click="onUserPropertyClick"
                                        @select="onSelectUserProperty"
                                        @input="onInputUserProperty"
                                        @fallback="onInputFallbackUserProperty"
                                        @uppercase="onCheckUppercaseUserProperty"
                                        @remove="onRemoveUserProperty"
                                        @close="closeAddUserPropertyPopover">
                                    </message-editor-with-emoji-picker>
                                </div>
                                <div class="cly-vue-drawer-step__section">
                                    <div class="cly-vue-push-notification-drawer__input-label bu-mb-2">
                                        {{i18n('push-notification.buttons')}}
                                        <cly-tooltip-icon :tooltip="i18n('push-notification.buttons-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                                    </div>
                                    <div class="cly-vue-drawer-step__line cly-vue-drawer-step__line--aligned" 
                                        v-for="(button,index) in pushNotificationUnderEdit.message[activeLocalization].buttons">
                                        <validation-provider v-slot="validation" rules="required" style="width:35%;" class="bu-pr-1">
                                            <el-input 
                                                autocomplete="off"
                                                v-model="pushNotificationUnderEdit.message[activeLocalization].buttons[index].label" 
                                                :placeholder="i18n('push-notification.enter-button-text')" 
                                                :class="{'is-error': validation.errors.length > 0}">
                                            </el-input>
                                        </validation-provider>
                                        <validation-provider v-slot="validation" :rules="{required:true, regex:urlRegex}" style="width:60%;" class="bu-pl-1 bu-pr-1">
                                            <el-input 
                                                autocomplete="off"
                                                v-model="pushNotificationUnderEdit.message[activeLocalization].buttons[index].url" 
                                                :placeholder="i18n('push-notification.enter-button-url')" 
                                                :class="{'is-error': validation.errors.length > 0}">
                                            </el-input>
                                        </validation-provider>
                                        <div class="bu-ml-1 cly-icon-button cly-icon-button--gray" @click="removeButton(index)">
                                            <i class="el-icon-close"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="cly-vue-drawer-step__section bu-pb-1">
                                    <el-button type="text" :disabled="isAddButtonDisabled" @click="addButton" class="bu-px-0 cly-text-button" size="small">
                                        {{addButtonLabel}}
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cly-vue-drawer-step__section">
                        <div class="bu-py-1 bu-my-1 cly-vue-push-notification-drawer__input-label">
                            {{i18n('push-notification.media-url')}}
                            <cly-tooltip-icon :tooltip="i18n('push-notification.media-url-platform-description')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                            <div class="cly-vue-push-notification-drawer__input-description">{{i18n('push-notification.media-url-description')}}</div>
                            <validation-provider v-slot="validation" ref="allMediaURLValidationProvider" :rules="{push_notification_message_media_url:PlatformEnum.ALL}" mode="passive">
                                <el-input 
                                    autocomplete="off"
                                    :value="pushNotificationUnderEdit.settings.all.mediaURL" 
                                    @input="onAllMediaURLInput" 
                                    :placeholder="i18n('push-notification.enter-media-url')" 
                                    :class="{'is-error':validation.errors.length > 0}">
                                </el-input>
                            </validation-provider>
                        </div>
                    </div>
                </template>
                <div class="cly-vue-drawer-step__section">
                    <div class=" cly-vue-push-notification-drawer__radio-group-header">
                        {{i18n('push-notification.platform-settings')}}
                    </div>
                    <div class="cly-vue-push-notification-drawer__input-description">{{i18n('push-notification.platform-settings-description')}}</div>
                    <el-collapse v-if="shouldDisplayIOSSettings" v-model="expandedPlatformSettings" class="cly-vue-push-notification-accordion-with-left-side-arrow ">
                        <el-collapse-item  :name="PlatformEnum.IOS">
                            <span class="collapse-title" slot="title"> IOS</span>
                            <message-setting-element 
                                v-if="pushNotificationUnderEdit.messageType === MessageTypeEnum.CONTENT"
                                :input="pushNotificationUnderEdit.settings.ios.soundFilename"
                                :toggle="settings.ios.isSoundFilenameEnabled"
                                rules="required"
                                @onChange="function(value){onSettingChange(PlatformEnum.IOS,'soundFilename',value)}"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.IOS,'isSoundFilenameEnabled',value)}"
                                :label="i18n('push-notification.sound-file-name')"
                                :placeholder="i18n('push-notification.enter-sound-file-name')"
                                :description="i18n('push-notification.sound-file-name-description')">
                            </message-setting-element>
                            <message-setting-element 
                                v-if="pushNotificationUnderEdit.messageType === MessageTypeEnum.CONTENT"
                                :toggle="settings.ios.isMediaURLEnabled"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.IOS,'isMediaURLEnabled',value)}"
                                :label="i18n('push-notification.media-url')"
                                :placeholder="i18n('push-notification.enter-media-url')"
                                :description="i18n('push-notification.media-url-platform-description')">
                                <validation-provider v-slot="validation" ref="iosMediaURLValidationProvider" :rules="{required:true,push_notification_message_media_url:PlatformEnum.IOS}" mode="passive">
                                    <el-input 
                                        autocomplete="off"
                                        :value="pushNotificationUnderEdit.settings.ios.mediaURL" 
                                        @input="onIOSMediaURLInput" 
                                        :placeholder="i18n('push-notification.enter-media-url')" 
                                        :class="{'is-error':validation.errors.length > 0}">
                                    </el-input>
                                </validation-provider>
                            </message-setting-element>
                            <message-setting-element 
                                :input="pushNotificationUnderEdit.settings.ios.badgeNumber"
                                :toggle="settings.ios.isBadgeNumberEnabled"
                                rules="required|integer"
                                @onChange="function(value){onSettingChange(PlatformEnum.IOS,'badgeNumber',value)}"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.IOS,'isBadgeNumberEnabled',value)}"
                                :label="i18n('push-notification.add-badge-number')"
                                :placeholder="i18n('push-notification.enter-badge-number')"
                                :description="i18n('push-notification.add-badge-number-description')">
                            </message-setting-element>
                            <message-setting-element 
                                v-if="pushNotificationUnderEdit.messageType === MessageTypeEnum.CONTENT"
                                :input="pushNotificationUnderEdit.settings.ios.subtitle"
                                :toggle="settings.ios.isSubtitleEnabled"
                                rules="required"
                                @onChange="function(value){onSettingChange(PlatformEnum.IOS,'subtitle',value)}"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.IOS,'isSubtitleEnabled',value)}"
                                :label="i18n('push-notification.subtitle')"
                                :placeholder="i18n('push-notification.enter-your-subtitle')"
                                :description="i18n('push-notification.subtitle-description')">
                            </message-setting-element>
                            <message-setting-element 
                                v-if="pushNotificationUnderEdit.messageType === MessageTypeEnum.CONTENT"
                                :input="pushNotificationUnderEdit.settings.ios.onClickURL"
                                :toggle="settings.ios.isOnClickURLEnabled"
                                :rules="{required:true, regex:urlRegex}"
                                @onChange="function(value){onSettingChange(PlatformEnum.IOS,'onClickURL',value)}"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.IOS,'isOnClickURLEnabled',value)}"
                                :label="i18n('push-notification.on-click-url')"
                                :placeholder="i18n('push-notification.enter-on-click-url')"
                                :description="i18n('push-notification.on-click-url-description')">
                            </message-setting-element>
                            <message-setting-element 
                                :toggle="settings.ios.isJsonEnabled"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.IOS,'isJsonEnabled',value)}"
                                :label="i18n('push-notification.send-json')"
                                :description="i18n('push-notification.send-json-description')">
                                <validation-provider rules="json|required" v-slot="validation">
                                    <el-input 
                                        autocomplete="off"
                                        v-model="pushNotificationUnderEdit.settings.ios.json" 
                                        type="textarea" 
                                        @input="function(value){onSettingChange(PlatformEnum.IOS,'json',value)}" 
                                        :placeholder="i18n('push-notification.enter-json-data')" 
                                        :class="{'is-error': validation.errors.length > 0}">
                                    </el-input>
                                </validation-provider>
                            </message-setting-element>
                            <message-setting-element 
                                :toggle="settings.ios.isUserDataEnabled"
                                rules="required"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.IOS,'isUserDataEnabled',value)}"
                                :label="i18n('push-notification.send-user-data')"
                                :description="i18n('push-notification.send-user-data-description')">
                                <validation-provider rules="required" v-slot="validation">
                                    <cly-select-x
                                        search-placeholder="Search in Properties"
                                        v-model="pushNotificationUnderEdit.settings.ios.userData"
                                        :placeholder="i18n('push-notification.select-user-data')" 
                                        :width="320"
                                        mode="multi-check-sortable"
                                        :hide-all-options-tab="false"
                                        :options="userPropertiesOptions"
                                        :class="{'is-error': validation.errors.length > 0}">
                                    </cly-select-x>
                                </validation-provider>
                            </message-setting-element>
                        </el-collapse-item>
                    </el-collapse>
                    <el-collapse v-if="shouldDisplayAndroidSettings" v-model="expandedPlatformSettings" class="cly-vue-push-notification-accordion-with-left-side-arrow">
                        <el-collapse-item :name="PlatformEnum.ANDROID">
                            <span class="collapse-title" slot="title"> Android</span>
                            <message-setting-element 
                                v-if="pushNotificationUnderEdit.messageType === MessageTypeEnum.CONTENT"
                                :input="pushNotificationUnderEdit.settings.android.soundFilename"
                                :toggle="settings.android.isSoundFilenameEnabled"
                                rules="required"
                                @onChange="function(value){onSettingChange(PlatformEnum.ANDROID,'soundFilename',value)}"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.ANDROID,'isSoundFilenameEnabled',value)}"
                                :label="i18n('push-notification.sound-file-name')"
                                :placeholder="i18n('push-notification.enter-sound-file-name')"
                                :description="i18n('push-notification.sound-file-name-description')">
                            </message-setting-element>
                            <message-setting-element
                                v-if="pushNotificationUnderEdit.messageType === MessageTypeEnum.CONTENT"
                                :toggle="settings.android.isMediaURLEnabled"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.ANDROID,'isMediaURLEnabled',value)}"
                                :label="i18n('push-notification.media-url')"
                                :placeholder="i18n('push-notification.enter-media-url')"
                                :description="i18n('push-notification.media-url-platform-description')">
                                <validation-provider v-slot="validation" ref="androidMediaURLValidationProvider" :rules="{required:true,push_notification_message_media_url:PlatformEnum.ANDROID}" mode="passive">
                                    <el-input 
                                        autocomplete="off"
                                        :value="pushNotificationUnderEdit.settings.android.mediaURL" 
                                        @input="onAndroidMediaURLInput" 
                                        :placeholder="i18n('push-notification.enter-media-url')" 
                                        :class="{'is-error':validation.errors.length > 0}">
                                    </el-input>
                                </validation-provider>
                            </message-setting-element>
                            <message-setting-element 
                                :input="pushNotificationUnderEdit.settings.android.badgeNumber"
                                :toggle="settings.android.isBadgeNumberEnabled"
                                rules="required|integer"
                                @onChange="function(value){onSettingChange(PlatformEnum.ANDROID,'badgeNumber',value)}"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.ANDROID,'isBadgeNumberEnabled',value)}"
                                :label="i18n('push-notification.add-badge-number')"
                                :placeholder="i18n('push-notification.enter-badge-number')"
                                :description="i18n('push-notification.add-badge-number-description')">
                            </message-setting-element>
                            <message-setting-element
                                v-if="pushNotificationUnderEdit.messageType === MessageTypeEnum.CONTENT" 
                                :input="pushNotificationUnderEdit.settings.android.icon"
                                :toggle="settings.android.isIconEnabled"
                                rules="required"
                                @onChange="function(value){onSettingChange(PlatformEnum.ANDROID,'icon',value)}"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.ANDROID,'isIconEnabled',value)}"
                                :label="i18n('push-notification.icon')"
                                :placeholder="i18n('push-notification.enter-icon')"
                                :description="i18n('push-notification.icon-description')">
                            </message-setting-element>
                            <message-setting-element
                                v-if="pushNotificationUnderEdit.messageType === MessageTypeEnum.CONTENT"  
                                :input="pushNotificationUnderEdit.settings.android.onClickURL"
                                :toggle="settings.android.isOnClickURLEnabled"
                                :rules="{required:true, regex:urlRegex}"
                                @onChange="function(value){onSettingChange(PlatformEnum.ANDROID,'onClickURL',value)}"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.ANDROID,'isOnClickURLEnabled',value)}"
                                :label="i18n('push-notification.on-click-url')"
                                :placeholder="i18n('push-notification.enter-on-click-url')"
                                :description="i18n('push-notification.on-click-url-description')">
                            </message-setting-element>
                            <message-setting-element 
                                :toggle="settings.android.isJsonEnabled"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.ANDROID,'isJsonEnabled',value)}"
                                :label="i18n('push-notification.send-json')"
                                :description="i18n('push-notification.send-json-description')">
                                <validation-provider rules="json|required" v-slot="validation">
                                    <el-input
                                        autocomplete="off" 
                                        v-model="pushNotificationUnderEdit.settings.android.json" 
                                        type="textarea"
                                        @input="function(value){onSettingChange(PlatformEnum.ANDROID,'json',value)}" 
                                        :placeholder="i18n('push-notification.enter-json-data')" 
                                        :class="{'is-error': validation.errors.length > 0}">
                                    </el-input>
                                </validation-provider>
                            </message-setting-element>
                            <message-setting-element 
                                :toggle="settings.android.isUserDataEnabled"
                                rules="required"
                                @onToggle="function(value){onSettingToggle(PlatformEnum.ANDROID,'isUserDataEnabled',value)}"
                                :label="i18n('push-notification.send-user-data')"
                                :description="i18n('push-notification.send-user-data-description')">
                                <validation-provider rules="required" v-slot="validation">
                                    <cly-select-x
                                        search-placeholder="Search in Properties"
                                        v-model="pushNotificationUnderEdit.settings.android.userData"
                                        :placeholder="i18n('push-notification.select-user-data')" 
                                        :width="320"
                                        mode="multi-check-sortable"
                                        :hide-all-options-tab="false"
                                        :options="userPropertiesOptions"
                                        :class="{'is-error': validation.errors.length > 0}">
                                    </cly-select-x>
                                </validation-provider>
                            </message-setting-element>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                </form>
            </cly-form-step>
            <cly-form-step id="step5" :name="i18n('push-notification-drawer.step-five')" >
                <div class="cly-vue-drawer-step__section">
                    <div class="cly-vue-push-notification-drawer__review-header bu-mb-4">
                        {{i18n('push-notification.review-message')}}
                        <cly-tooltip-icon :tooltip="i18n('push-notification.review-message-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon>
                    </div>
                    <div class="cly-vue-push-notification-drawer__review-section-group-header bu-my-4">
                        {{i18n('push-notification.message-content')}}
                    </div>
                    <div class="bu-is-flex bu-is-align-items-center bu-my-4" v-if="pushNotificationUnderEdit.messageType === MessageTypeEnum.CONTENT">
                        <div class="bu-mr-2 cly-vue-push-notification-drawer__checkbox-label">                                
                            {{i18n('push-notification-details.localization-filter-label')}}                          
                        </div>
                        <el-select v-model="selectedLocalizationFilter">
                            <el-option 
                                v-for="item in selectedLocalizationFilterOptions"
                                :key="item.value" 
                                :value="item.value" 
                                :label="item.label">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="cly-vue-push-notification-drawer__section-group bu-is-flex bu-is-flex-direction-column bu-py-3">
                        <template v-if="pushNotificationUnderEdit.messageType === MessageTypeEnum.CONTENT">
                            <review-section-row :label="i18n('push-notification.message-name')" :value="pushNotificationUnderEdit.name"></review-section-row>
                            <review-section-row :label="i18n('push-notification.platforms')" :value="previewPlatforms.join(', ')"></review-section-row>
                            <review-section-row :label="i18n('push-notification.review-title')">
                                <div>
                                    <template v-for="(component) in previewMessageTitle">
                                        <keep-alive>
                                            <component v-bind:is="component.name" :value="component.value"></component>
                                        </keep-alive>
                                    </template>
                                </div>
                            </review-section-row>
                            <review-section-row :label="i18n('push-notification.content')">
                                <div>
                                    <template v-for="(component) in previewMessageContent">
                                        <keep-alive>
                                            <component v-bind:is="component.name" :value="component.value"></component>
                                        </keep-alive>
                                    </template>
                                </div>
                            </review-section-row>
                            <template v-for="(button,index) in pushNotificationUnderEdit.message[selectedLocalizationFilter].buttons">
                                <review-section-row :label="i18n('push-notification.button-text')" :value="button.label"></review-section-row>
                                <review-section-row :label="i18n('push-notification.button-url')" :value="button.url"></review-section-row>
                            </template>
                            <review-section-row 
                                v-if="hasAllPlatformMediaOnly" 
                                :label="i18n('push-notification.media-url')" 
                                :value="pushNotificationUnderEdit.settings[PlatformEnum.ALL].mediaURL">
                            </review-section-row>
                            <template v-else>
                                <review-section-row :label="i18n('push-notification.ios-media-url')" :value="previewIOSMediaURL"></review-section-row>
                                <review-section-row :label="i18n('push-notification.android-media-url')" :value="previewAndroidMediaURL"></review-section-row>
                            </template>
                        </template>
                        <template v-if="pushNotificationUnderEdit.messageType === MessageTypeEnum.SILENT">
                            <review-section-row :label="i18n('push-notification.ios-badge-number')" :value="pushNotificationUnderEdit.settings[PlatformEnum.IOS].badgeNumber"></review-section-row>
                            <review-section-row :label="i18n('push-notification.ios-json-data')" :value="prettifyJSON(pushNotificationUnderEdit.settings[PlatformEnum.IOS].json)" :usePre="true"></review-section-row>
                            <review-section-row :label="i18n('push-notification.ios-user-data')" :value="pushNotificationUnderEdit.settings[PlatformEnum.IOS].userData.join(', ')"></review-section-row>
                            <review-section-row :label="i18n('push-notification.android-badge-number')" :value="pushNotificationUnderEdit.settings[PlatformEnum.ANDROID].badgeNumber"></review-section-row>
                            <review-section-row :label="i18n('push-notification.android-json-data')" :value="prettifyJSON(pushNotificationUnderEdit.settings[PlatformEnum.ANDROID].json)" :usePre="true"></review-section-row>
                            <review-section-row :label="i18n('push-notification.android-user-data')" :value="pushNotificationUnderEdit.settings[PlatformEnum.ANDROID].userData.join(', ')"></review-section-row>
                        </template>
                    </div>
                </div>
                </div>
                <template v-if="type === TypeEnum.ONE_TIME | type === TypeEnum.AUTOMATIC || type === TypeEnum.RECURRING || type === TypeEnum.MULTIPLE ">
                    <div class="cly-vue-drawer-step__section">
                        <div class="cly-vue-push-notification-drawer__review-section-group-header bu-mb-2">
                            {{i18n('push-notification.targeting')}}
                        </div>
                        <div class="cly-vue-push-notification-drawer__section-group cly-vue-drawer-step__section bu-is-flex bu-is-flex-direction-column">
                            <template v-if="type === TypeEnum.ONE_TIME">
                                <review-section-row label="Targeted users">
                                    <template v-if="pushNotificationUnderEdit[TypeEnum.ONE_TIME].targeting === TargetingEnum.ALL">
                                        {{targetingOptions[pushNotificationUnderEdit.oneTime.targeting].label}}
                                    </template>
                                    <template v-else>
                                        {{previewCohorts(pushNotificationUnderEdit.cohorts).join(', ')}}
                                    </template>
                                </review-section-row>
                                <review-section-row v-if="shouldDisplayNumberOfUsers" :label="i18n('push-notification.current-number-of-users')" :value="currentNumberOfUsers"></review-section-row>
                                <review-section-row v-if="pushNotificationUnderEdit[TypeEnum.ONE_TIME].targeting === TargetingEnum.SEGMENTED" :label="i18n('push-notification.geolocations')" :value="previewLocations.join(', ')"></review-section-row>
                                <review-section-row 
                                    v-if="type === TypeEnum.ONE_TIME" 
                                    :label="i18n('push-notification.when-to-determine')" 
                                    :value="audienceSelectionOptions[pushNotificationUnderEdit[TypeEnum.ONE_TIME].audienceSelection].label">
                                </review-section-row>
                            </template>
                            <template v-if="type === TypeEnum.RECURRING">
                                <review-section-row label="Targeted users">
                                    <template v-if="pushNotificationUnderEdit[TypeEnum.RECURRING].targeting === TargetingEnum.ALL">
                                        {{targetingOptions[pushNotificationUnderEdit[TypeEnum.RECURRING].targeting].label}}
                                    </template>
                                    <template v-else>
                                        {{previewCohorts(pushNotificationUnderEdit.cohorts).join(', ')}}
                                    </template>
                                </review-section-row>
                                <review-section-row v-if="shouldDisplayNumberOfUsers" :label="i18n('push-notification.current-number-of-users')" :value="currentNumberOfUsers"></review-section-row>
                                <review-section-row v-if="pushNotificationUnderEdit[TypeEnum.RECURRING].targeting === TargetingEnum.SEGMENTED" :label="i18n('push-notification.geolocations')" :value="previewLocations.join(', ')"></review-section-row>
                                <review-section-row 
                                    v-if="type === TypeEnum.RECURRING" 
                                    :label="i18n('push-notification.when-to-determine')" 
                                    :value="audienceSelectionOptions[pushNotificationUnderEdit[TypeEnum.RECURRING].audienceSelection].label">
                                </review-section-row>
                            </template>
                            <template v-if="type === TypeEnum.MULTIPLE">
                                <review-section-row label="Targeted users">
                                    <template v-if="pushNotificationUnderEdit[TypeEnum.MULTIPLE].targeting === TargetingEnum.ALL">
                                        {{targetingOptions[pushNotificationUnderEdit.multi.targeting].label}}
                                    </template>
                                    <template v-else>
                                        {{previewCohorts(pushNotificationUnderEdit.cohorts).join(', ')}}
                                    </template>
                                </review-section-row>
                                <review-section-row v-if="shouldDisplayNumberOfUsers" :label="i18n('push-notification.current-number-of-users')" :value="currentNumberOfUsers"></review-section-row>
                                <review-section-row v-if="pushNotificationUnderEdit[TypeEnum.MULTIPLE].targeting === TargetingEnum.SEGMENTED" :label="i18n('push-notification.geolocations')" :value="previewLocations.join(', ')"></review-section-row>
                                <review-section-row 
                                    v-if="type === TypeEnum.MULTIPLE" 
                                    :label="i18n('push-notification.when-to-determine')" 
                                    :value="audienceSelectionOptions[pushNotificationUnderEdit[TypeEnum.MULTIPLE].audienceSelection].label">
                                </review-section-row>
                            </template>
                            <template v-if="type === TypeEnum.AUTOMATIC">
                                <review-section-row :label="i18n('push-notification.trigger-type')" :value="triggerOptions[pushNotificationUnderEdit.automatic.trigger].label"></review-section-row>
                                <review-section-row v-if="pushNotificationUnderEdit.automatic.trigger === TriggerEnum.EVENT" :label="i18n('push-notification.events')" :value="pushNotificationUnderEdit.automatic.events.join(', ')"></review-section-row>
                                <review-section-row v-else :label="i18n('push-notification.cohorts')" :value="previewCohorts(pushNotificationUnderEdit.automatic.cohorts).join(', ')"></review-section-row>
                                <review-section-row v-if="isLocationSet" :label="i18n('push-notification.geolocations')" :value="previewLocations.join(', ')"></review-section-row>
                                <review-section-row v-if="pushNotificationUnderEdit.automatic.trigger === TriggerEnum.EVENT" :label="i18n('push-notification.delivery-date-calculation')" :value="deliveryDateCalculationOptions[pushNotificationUnderEdit.automatic.deliveryDateCalculation].label"></review-section-row>
                                <review-section-row v-else :label="i18n('push-notification.behavior-trigger-not-met')" :value="triggerNotMetOptions[pushNotificationUnderEdit.automatic.triggerNotMet].label"></review-section-row>
                            </template>
                        </div>
                    </div>
                </template>
                <div class="cly-vue-push-notification-drawer__section bu-pt-2">
                    <div class="cly-vue-push-notification-drawer__review-section-group-header bu-mb-2">
                        {{i18n('push-notification.delivery')}}
                    </div>
                    <div class="cly-vue-push-notification-drawer__section-group cly-vue-drawer-step__section bu-is-flex bu-is-flex-direction-column">
                        <template v-if="type === TypeEnum.ONE_TIME || type === TypeEnum.MULTIPLE ">
                            <review-section-row v-if="type === TypeEnum.MULTIPLE" :label="i18n('push-notification.delivery-times')" :value="formatDeliveryDates(pushNotificationUnderEdit.delivery.multipleDates)"></review-section-row>
                            <review-section-row :label="i18n('push-notification.delivery-type')" :value="startDateOptions[pushNotificationUnderEdit.delivery.type].label"></review-section-row>
                            <review-section-row :label="i18n('push-notification.scheduled-for')" :value="formatDateTime(pushNotificationUnderEdit.delivery.startDate)"></review-section-row>
                            <review-section-row :label="i18n('push-notification.expiration-time')" :value="i18n('push-notification.message-will-expire-after', pushNotificationUnderEdit.expiration.days, pushNotificationUnderEdit.expiration.hours)"></review-section-row>    
                        </template>
                        <template v-if="type === TypeEnum.AUTOMATIC || type === TypeEnum.TRANSACTIONAL">
                            <review-section-row :label="i18n('push-notification.delivery-timeframe')" :value="startDateOptions[pushNotificationUnderEdit.delivery.type].label"></review-section-row>
                            <review-section-row :label="i18n('push-notification.start-date')" :value="formatDateTime(pushNotificationUnderEdit.delivery.startDate)"></review-section-row>
                            <review-section-row v-if="type === TypeEnum.AUTOMATIC && isEndDateSet" :label="i18n('push-notification.end-date')" :value="formatDateTime(pushNotificationUnderEdit.delivery.endDate)"></review-section-row>
                            <review-section-row v-if="type === TypeEnum.AUTOMATIC" :label="i18n('push-notification.delivery-method')" :value="deliveryMethodOptions[pushNotificationUnderEdit.automatic.deliveryMethod].label"></review-section-row>
                            <review-section-row v-if="type === TypeEnum.AUTOMATIC" :label="i18n('push-notification.capping')">
                                <template v-if="pushNotificationUnderEdit.automatic.capping">
                                    {{i18n('push-notification.maximum-messages', pushNotificationUnderEdit.automatic.maximumMessagesPerUser)}} <br />
                                    {{i18n('push-notification.minimum-days-and-hours', pushNotificationUnderEdit.automatic.minimumTimeBetweenMessages.days, pushNotificationUnderEdit.automatic.minimumTimeBetweenMessages.hours)}}
                                </template>
                                <template v-else>
                                    {{i18n('push-notification.no-capping')}}
                                </template>
                            </review-section-row>
                        </template>
                        <template v-if="type === TypeEnum.RECURRING">
                            <review-section-row :label="i18n('push-notification.start-date')" :value="formatDateTime(pushNotificationUnderEdit.delivery.startDate)"></review-section-row>
                            <review-section-row v-if="isEndDateSet" :label="i18n('push-notification.end-date')" :value="formatDateTime(pushNotificationUnderEdit.delivery.endDate)"></review-section-row>
                            <review-section-row :label="i18n('push-notification-drawer.notification-frequency')" :value="pushNotificationUnderEdit.delivery.repetition.bucket"></review-section-row>
                            <review-section-row v-if="pushNotificationUnderEdit.delivery.repetition.on.length" :label="i18n('push-notification-drawer.repeat-on')" :value="formatRepetitionDays(pushNotificationUnderEdit.delivery.repetition.on)"></review-section-row>
                            <review-section-row :label="i18n('push-notification-drawer.repeat-at')" :value="formatDateTime(pushNotificationUnderEdit.delivery.repetition.at, 'HH:mm a')"></review-section-row>
                        </template>
                    </div>
                </div>
                <div class="cly-vue-push-notification-drawer__section">
                    <div class="cly-vue-push-notification-drawer__review-section-group-header bu-mb-4">
                        {{i18n('push-notification.confirmation')}}
                    </div>
                    <div class="cly-vue-push-notification-drawer__section-group bu-mb-3 bu-py-3">
                        <div class="bu-level bu-is-flex-wrap-wrap">
                            <div class="bu-level bu-is-flex-direction-column bu-is-align-items-flex-start">
                                <div class="cly-vue-push-notification-drawer__review-section-group-subheader bu-mb-3">
                                    {{i18n('push-notification.testing')}}
                                    <!-- <cly-tooltip-icon :tooltip="i18n('push-notification.testing-tooltip')" icon="ion ion-help-circled"> </cly-tooltip-icon> -->
                                </div>
                                <div class="cly-vue-push-notification-review-section-row__value">{{i18n('push-notification.you-can-send-the-test-message')}}</div>
                            </div>
                            <el-button type="default" @click="onSendToTestUsers" v-loading="isLoading">
                                <div class="ion ion-android-send"></div>{{i18n('push-notification.send-to-test-users')}}
                            </el-button>
                        </div>
                    </div>
                    <div class="cly-vue-push-notification-drawer__section-group bu-py-3">
                        <div class="bu-levelbu-is-flex-direction-column bu-is-align-items-flex-start">
                            <div class="cly-vue-push-notification-drawer__review-section-group-subheader bu-mb-3">
                                {{i18n('push-notification.confirmation-uppercase')}}
                                <!-- <cly-tooltip-icon :tooltip="i18n('push-notification.confirmation-uppercase-description')" icon="ion ion-help-circled"> </cly-tooltip-icon> -->
                            </div>
                            <div class="bu-is-flex bu-is-align-items-center">
                                <validation-provider v-slot="validation" :rules="{required: {allowFalse: false}}">
                                    <el-checkbox v-model="isConfirmed" :class="{'cly-vue-push-notification-drawer__checkbox-is-error':validation.errors.length > 0}"></el-checkbox> 
                                </validation-provider>
                                <div class="cly-vue-push-notification-review-section-row__value bu-ml-1">
                                    {{i18n('push-notification.i-am-ready-to-send')}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </cly-form-step>
    </template>
</cly-drawer>
